import React, { useState, useEffect } from 'react';
import { ConnectRC, connect, history } from 'umi';
import { ConnectState } from '@/models/connect';
import { ProjectModelState } from '@/models/modules/project';
import { Table } from 'antd';
import moment from 'moment';

import { findAllProjrctList } from '@/service/gitLab';

import styles from './index.less';

interface ProjectProps {
    index: ProjectModelState;
}

const columns: Array<any> = [
    {
        title: '序号',
        render: (text: any, row: any, index: number) => { return index + 1 },
        width: 70,
        align: 'center'
    },
    {
        title: '项目号',
        dataIndex: 'id',
        width: 80
    },
    {
        title: '项目名称',
        dataIndex: 'name',
        ellipsis: true,
        width: 180
    },
    {
        title: '默认分支',
        dataIndex: 'default_branch',
        ellipsis: true,
        align: 'center',
        width: 100
    },
    {
        title: '拥有者',
        render: (row: any) => { return row.namespace.name },
        ellipsis: true,
        align: 'center',
        width: 100
    },
    {
        title: '最新提交时间',
        dataIndex: 'last_activity_at',
        key: 'last_activity_at',
        ellipsis: true,
        width: 180,
        align: 'center',
        render: (text: any, row: any, index: number) => { return moment(row.last_activity_at).format('YYYY-MM-DD HH:mm:ss') },
    },
    {
        title: '创建时间',
        dataIndex: 'created_at',
        key: 'created_at',
        ellipsis: true,
        width: 180,
        align: 'center',
        render: (text: any, row: any, index: number) => { return moment(row.created_at).format('YYYY-MM-DD HH:mm:ss') },
    },
    {
        title: 'HttpUrl',
        dataIndex: 'http_url_to_repo',
        key: 'http_url_to_repo',
        ellipsis: true,
        width: 300,
        render: (text: string) => <a href={text} target="_blank">{text}</a>,
    },
    {
        title: 'sshUrl',
        key: 'ssh_url_to_repo',
        dataIndex: 'ssh_url_to_repo',
        ellipsis: true,
        width: 300,
        render: (text: string) => <a href={text} target="_blank">{text}</a>,
    },
    {
        title: 'webUrl',
        key: 'web_url',
        dataIndex: 'web_url',
        ellipsis: true,
        width: 300,
        render: (text: string) => <a href={text} target="_blank">{text}</a>,
    },
    {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        align: 'center',
        width: 150,
        render: (text: any, row: any,) => {
            return (
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <a onClick={() => handleShowBranches(row)} >分支</a>
                    <a>Tags</a>
                    <a>成员</a>
                </div>
            )
        },
    },
];

// 查看项目分支
const handleShowBranches = (projectInfo: any) => {
    history.push({
        pathname: '/projectBranches',
        query: { id: projectInfo.id, name: projectInfo.name, userName: projectInfo.namespace?.name },
    });
};

const ProjectPage: ConnectRC<ProjectProps> = (props) => {
    const [projectList, setProjectList] = useState<any>([]);
    const [userList, setUserList] = useState<any>();

    const { index } = props;

    useEffect(() => {
        findAllProjrctList().then((res) => {
            setProjectList(res)
        });
    }, []);


    return (
        <div className={styles.project_layout}>
            <Table columns={columns} dataSource={projectList} bordered scroll={{ x: 1500, y: 500 }} />
        </div>
    );
};

export default connect(({ index }: ConnectState) => ({
    index,
}))(ProjectPage);
